<script setup>
import { ref, onMounted } from 'vue'
import CapsuleChart from '@/components/datav/capsule-chart/capsule-chart.vue'

const config = ref({
  showValue: true,
  unit: '次'
})

const data = ref([])

const getData = () => {
  // 使用固定模拟数据
  data.value = [
    { name: '深圳市', value: 856 },
    { name: '北京市', value: 743 },
    { name: '上海市', value: 634 },
    { name: '广州市', value: 521 },
    { name: '杭州市', value: 478 },
    { name: '成都市', value: 392 },
    { name: '南京市', value: 287 },
    { name: '武汉市', value: 156 }
  ]
}

onMounted(() => {
  getData()
})
</script>

<template>
  <view class="right_center">
    <CapsuleChart :config="config" style="width: 100%; height: 260px" :data="data" />
  </view>
</template>

<style scoped lang="scss">
.right_center {
  box-sizing: border-box;
  padding: 0 16px;
  width: 100%;
  height: 100%;
}
</style>
